<template>
  <div id="bills-to-review">
    <div class="card bg-transparent">
      <div class="card-header">
        <nav aria-label="breadcrumb" role="navigation">
          <ol class="breadcrumb pb-0">
            <li class="breadcrumb-item active" aria-current="page">
              账单 - 待审核
            </li>

            <li class="breadcrumb-item ms-auto">
              <router-link to="/bills">列表</router-link>
            </li>
            <li class="breadcrumb-item">
              <router-link to="/bills/toSettle">待结算</router-link>
            </li>
            <li class="breadcrumb-item">
              <router-link to="/ent/settlements">结算单</router-link>
            </li>
            <li class="breadcrumb-item">
              <router-link to="/ent/receipts">收款单</router-link>
            </li>
          </ol>
        </nav>
      </div>
      <div class="card-body px-0">
        <form class="row">
          <div class="col-1">
            <select class="form-select" v-model.number="billtype">
              <option value="0">机票</option>
              <option value="5">机票退票</option>
              <option value="7">机票改签</option>
              <option value="6">增值服务</option>
              <option value="2">酒店</option>
              <option value="3">火车票</option>
              <option value="4">租车</option>
            </select>
          </div>
          <div class="col-1">
            <my-date-picker
              id="beginDate"
              v-model="beginDate"
              name="sc.beginDate"
              placeholder="账单日期从"
            ></my-date-picker>
          </div>
          <div class="col-1">
            <my-date-picker
              id="endDate"
              v-model="endDate"
              name="sc.endDate"
              placeholder="账单日期到"
            ></my-date-picker>
          </div>
          <div class="col-1">
            <my-date-picker
              id="etdzDateBegin"
              v-model="etdzDateBegin"
              name="sc.etdzDateBegin"
              placeholder="出票日期从"
            ></my-date-picker>
          </div>
          <div class="col-1">
            <my-date-picker
              id="etdzDateEnd"
              v-model="etdzDateEnd"
              name="sc.etdzDateEnd"
              placeholder="出票日期到"
            ></my-date-picker>
          </div>
          <div class="col-2 px-0">
            <my-select-customer
              :customerId.sync="customerId"
              :enterpriseType="1"
            ></my-select-customer>
          </div>
          <div class="col-1">
            <select class="form-select" v-model.number="supplierId">
              <option value="0">所有供应商</option>
              <template v-for="info in suppliers">
                <option :value="info.id">{{ info.name }}</option>
              </template>
            </select>
          </div>
          <div class="col-1">
            <my-select-op2 :username.sync="op2"></my-select-op2>
          </div>
          <div class="col-1">
            <select class="form-select" v-model.number="sc.pageSize">
              <option value="50">50</option>
              <option value="500">500</option>
              <option value="5000">5000</option>
            </select>
          </div>
          <div class="col">
            <button
              type="button"
              class="btn btn-primary ms-1"
              @click.stop="searchBills()"
            >
              查找账单
            </button>
            <button
              type="button"
              class="btn btn-danger float-end ms-2"
              @click.stop="autoReview()"
              :disabled="autoReviewing"
            >
              <template v-if="autoReviewing"> 自动审核中... </template>
              <template v-else> 自动审核 </template>
            </button>
            <a
              class="btn btn-success float-end"
              @click.stop="downloadBillInfo()"
              href="#"
              >下载</a
            >
          </div>
        </form>
      </div>
      <table class="table table-striped table-hover table-sm">
        <thead>
          <tr>
            <th>账单号</th>
            <th>客户</th>
            <th>编号/成本/项目</th>
            <th>账单日期</th>
            <th>出票日期</th>
            <th>订票员</th>
            <th>收款方式</th>
            <th>供应商</th>
            <th>支付方式</th>
            <th class="text-end">账单金额</th>
            <th class="text-end">成本</th>
            <th class="text-end">利润</th>
            <th>备注</th>
            <th>订单号</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="text" size="8" v-model.trim="filter.billNum" />
            </td>
            <td>
              <input type="text" size="8" v-model.trim="filter.vipName" />
            </td>
            <td>
              <input type="text" size="6" v-model.trim="filter.customerCode" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td class="text-end">
              <input type="text" size="6" v-model.number="filter.billSum" />
            </td>
            <td class="text-end">
              <input type="text" size="6" v-model.number="filter.cost" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td><button @click.stop="resetFilter()">清空</button></td>
          </tr>
          <tr v-for="(info, index) in filterBills">
            <td>
              <input type="checkbox" :value="info.id" v-model="reviewedIds" />
              {{ info.billNum }}
            </td>
            <td>
              <template v-if="info.customerType === 0"> 散客 </template>
              <template v-else-if="info.customer !== null">
                {{ info.customer.vipName }}
              </template>
            </td>
            <td>
              <template v-if="info.customer !== null">
                {{ info.customer.customerCode }}/
              </template>
              {{ info.costCenter }}/{{ info.projectName }}
            </td>
            <td>{{ info.opDate }}</td>
            <td>{{ info.etdzDate }}</td>
            <td>{{ info.op1 }}</td>
            <td>
              {{ info.payTypeNoteDesc }}
              <template v-if="info.bePaid === '1'">
                <span class="text-success small">已收</span>
              </template>
            </td>
            <td>
              <template v-if="info.supplier !== null">
                {{ info.supplier.name }}
              </template>
            </td>
            <td>
              <template v-if="info.paymentMethod !== null">
                {{ info.paymentMethod.name }}
              </template>
            </td>
            <td class="text-end">{{ info.billSum }}</td>
            <td class="text-end">{{ info.cost }}</td>
            <td class="text-end">{{ info.profit }}</td>
            <td>{{ info.remark }}</td>
            <td>{{ info.orderNo }}</td>
            <td>
              <router-link
                :to="`/bill/detail/` + info.id + `?print=1`"
                target="_blank"
                >详情</router-link
              >
            </td>
          </tr>
          <tr>
            <td colspan="9" class="text-end">合计：</td>
            <td class="text-end">{{ totalBillSum }}</td>
            <td class="text-end">{{ totalCost }}</td>
            <td class="text-end">{{ totalProfit }}</td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr v-if="orders.length > 0">
            <td colspan="15">
              <button
                @click.stop="uncheckAll()"
                class="btn btn-sm btn-secondary"
              >
                全否
              </button>
              <button @click.stop="checkAll()" class="btn btn-sm btn-primary">
                全选
              </button>
              <button
                @click.stop="checkAllShow()"
                class="btn btn-sm btn-warning"
              >
                全选可见
              </button>

              <button
                class="btn btn-success float-end"
                @click.stop="reviewPass()"
              >
                审核通过
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <nav id="pagination-box" class="float-end" v-if="sc.pageTotal > 1">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <my-modal-prompt ref="modalPrompt">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import { APP_FLIGHT_PATH } from "@/common/common.js";
import { searchSuppliers } from "@/api/basic-data.js";
import {
  searchUnreviewedBills,
  reviewBillInfoPassed,
  autoReviewBillInfo,
} from "@/api/bill.js";
import MyPagination from "@/components/my-pagination.vue";
import MyDatePicker from "@/components/my-datepicker.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MySelectCustomer from "@/components/my-select2-customer.vue";
import MySelectOp2 from "@/components/my-select-operator.vue";

export default {
  components: {
    MyDatePicker,
    MyPagination,
    MyModalPrompt,
    MySelectCustomer,
    MySelectOp2,
  },
  data() {
    return {
      orders: [],
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 50,
        pageTotal: 0,
      },
      beginDate: "",
      endDate: "",
      etdzDateBegin: "",
      etdzDateEnd: "",
      billtype: "0",
      customerId: -1,
      suppliers: [],
      supplierId: 0,
      op2: "",

      totalBillSum: 0,
      totalCost: 0,
      totalProfit: 0,

      reviewedIds: [],
      modalTitle: "",
      filter: {
        billNum: "",
        customerCode: "",
        vipName: "",
        billSum: 0,
        cost: 0,
      },
      autoReviewing: false,
    };
  },
  watch: {
    reviewedIds: function () {
      this.caclTotal();
    },
  },
  computed: {
    filterBills: function () {
      const self = this;
      return this.orders.filter(function (info) {
        // console.log(info)
        return (
          (self.filter.billNum === "" ||
            info.billNum.indexOf(self.filter.billNum) >= 0) &&
          (self.filter.customerCode === "" ||
            (info.customer !== null &&
              info.customer.customerCode !== null &&
              info.customer.customerCode.indexOf(self.filter.customerCode) >=
                0)) &&
          (self.filter.billSum === 0 || self.filter.billSum === info.billSum) &&
          (self.filter.cost === 0 || self.filter.cost === info.cost) &&
          (self.filter.vipName === "" ||
            (info.customer !== null &&
              info.customer.vipName !== null &&
              info.customer.vipName.indexOf(self.filter.vipName) >= 0))
        );
      });
    },
  },
  mounted: function () {
    this.searchSuppliers();
    this.searchBills();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", {
        loading: false,
      });
    },
    searchBills: function () {
      this.uncheckAll();
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.etdzDateBegin": this.etdzDateBegin,
        "sc.etdzDateEnd": this.etdzDateEnd,
        "sc.ticketer": this.op2,
        billType: this.billtype,
        customerId: this.customerId,
        supplierId: this.supplierId,
      };

      this.showLoading();

      searchUnreviewedBills(
        params,
        (jsonResult) => {
          this.orders = jsonResult.dataList;
          this.sc = jsonResult.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    resetTotal: function () {
      this.totalBillSum = 0;
      this.totalCost = 0;
      this.totalProfit = 0;
    },
    caclTotal: function () {
      // console.log('caclTotal')
      this.resetTotal();

      for (const info of this.orders) {
        if (this.reviewedIds.indexOf(info.id) >= 0) {
          this.totalBillSum += info.billSum;
          this.totalCost += info.cost;
          this.totalProfit += info.profit;
        }
      }

      this.totalBillSum = Math.round(this.totalBillSum * 100) / 100;
      this.totalCost = Math.round(this.totalCost * 100) / 100;
      this.totalProfit = Math.round(this.totalProfit * 100) / 100;
    },
    checkAllShow: function () {
      const self = this;
      this.reviewedIds = [];
      this.filterBills.forEach(function (item) {
        self.reviewedIds.push(item.id);
      });
      this.caclTotal();
    },
    checkAll: function () {
      const self = this;
      this.reviewedIds = [];
      this.orders.forEach(function (item) {
        self.reviewedIds.push(item.id);
      });
      this.caclTotal();
    },
    uncheckAll: function () {
      this.reviewedIds = [];
      this.resetTotal();
    },
    reviewPass: function () {
      if (this.reviewedIds.length < 1) {
        this.showErrMsg("请选中审核通过的账单号");
        return;
      }

      this.modalTitle = "请确认要通过审核的账单总金额为：";
      this.$refs.modalPrompt
        .modal(this.totalBillSum)
        .then(() => {
          reviewBillInfoPassed(
            {
              total: this.totalBillSum,
              billIds: this.reviewedIds,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    searchSuppliers: function () {
      if (this.suppliers.length > 0) return;
      const params = {
        "sc.pageNo": 1,
        "sc.pageSize": 500,
      };

      searchSuppliers(params, (jsonResult) => {
        this.suppliers = jsonResult.dataList;
      });
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.searchBills();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.searchBills();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.searchBills();
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg);
      } else {
        this.searchBills();
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
      }
    },
    downloadBillInfo: function () {
      const params =
        "sc.pageNo=" +
        this.sc.pageNo +
        "&sc.beginDate=" +
        this.beginDate +
        "&sc.endDate=" +
        this.endDate +
        "&billType=" +
        this.billtype +
        "&customerId=" +
        this.customerId +
        "&reviewed=0";
      const url = APP_FLIGHT_PATH + "/downloadBillInfo.do?" + params;
      window.open(url);
    },
    resetFilter: function () {
      this.filter.billNum = "";
      this.filter.customerCode = "";
      this.filter.vipName = "";
      this.filter.billSum = 0;
      this.filter.cost = 0;
    },
    autoReview: function () {
      // auto review
      this.autoReviewing = true;
      autoReviewBillInfo(
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            this.showErrMsg(jsonResult.desc);
          } else {
            this.showErrMsg("出现错误");
          }
        },
        () => {
          this.autoReviewing = false;
        }
      );
    },
  },
};
</script>
